<template>
  <div class="creator-detail">
    <!-- 加载状态 -->
    <div v-if="loading" class="creator-detail__loading">
      <n-spin size="large">
        <template #description>
          正在加载创作者详情...
        </template>
      </n-spin>
    </div>

    <!-- 创作者详情内容 -->
    <div v-else-if="creator" class="creator-detail__content">
      <!-- 头部信息 -->
      <div class="creator-detail__header">
        <div class="creator-detail__avatar">
          <n-avatar
            :size="80"
            round
            color="transparent"
          >
            <img
              :src="creator.avatar"
              :alt="creator.nickname"
              class="creator-detail__avatar-img"
              @error="handleAvatarError"
              @load="handleAvatarLoad"
            />
            <template #fallback>
              <div class="creator-detail__avatar-fallback">
                {{ creator.nickname.charAt(0) }}
              </div>
            </template>
          </n-avatar>
          
          <!-- 推荐标识 -->
          <n-tag
            v-if="creator.is_recommend === 1"
            type="warning"
            size="small"
            round
            class="creator-detail__recommend-tag"
          >
            <template #icon>
              <n-icon><StarOutline /></n-icon>
            </template>
            推荐
          </n-tag>
        </div>

        <div class="creator-detail__info">
          <h2 class="creator-detail__name">{{ creator.nickname }}</h2>
          
          <div class="creator-detail__meta">
            <n-tag
              :type="getCreatorTypeTagType(creator.creator_type)"
              size="medium"
              round
            >
              {{ getCreatorTypeText(creator.creator_type) }}
            </n-tag>
            
            <n-tag
              :type="getStatusTagType(creator.status)"
              size="medium"
              round
            >
              {{ getStatusText(creator.status) }}
            </n-tag>
          </div>

          <div class="creator-detail__category">
            <n-icon><FolderOutline /></n-icon>
            <span>{{ creator.category || '未分类' }}</span>
          </div>
        </div>
      </div>

      <!-- 描述 -->
      <div v-if="creator.description" class="creator-detail__description">
        <h3>简介</h3>
        <p>{{ creator.description }}</p>
      </div>

      <!-- 统计数据 -->
      <div class="creator-detail__stats">
        <h3>数据统计</h3>
        <div class="creator-detail__stats-grid">
          <div class="creator-detail__stat-item">
            <n-icon :size="24" color="#409eff"><PeopleOutline /></n-icon>
            <div class="creator-detail__stat-info">
              <span class="creator-detail__stat-value">{{ formatNumber(creator.followers) }}</span>
              <span class="creator-detail__stat-label">粉丝数</span>
            </div>
          </div>

          <div class="creator-detail__stat-item">
            <n-icon :size="24" color="#67c23a"><VideocamOutline /></n-icon>
            <div class="creator-detail__stat-info">
              <span class="creator-detail__stat-value">{{ creator.platform }}</span>
              <span class="creator-detail__stat-label">主平台</span>
            </div>
          </div>

          <div class="creator-detail__stat-item">
            <n-icon :size="24" color="#e6a23c"><RadioOutline /></n-icon>
            <div class="creator-detail__stat-info">
              <span class="creator-detail__stat-value">{{ getCreatorTypeText(creator.creator_type) }}</span>
              <span class="creator-detail__stat-label">类型</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 游戏标签 -->
      <div v-if="creator.game_tags_array && creator.game_tags_array.length > 0" class="creator-detail__tags">
        <h3>游戏标签</h3>
        <div class="creator-detail__tags-list">
          <n-tag
            v-for="tag in creator.game_tags_array"
            :key="tag"
            type="info"
            size="medium"
            round
          >
            {{ tag }}
          </n-tag>
        </div>
      </div>

      <!-- 视频平台 -->
      <div v-if="creator.video_platforms && creator.video_platforms.length > 0" class="creator-detail__platforms">
        <h3>视频平台</h3>
        <div class="creator-detail__platforms-list">
          <div
            v-for="platform in creator.video_platforms"
            :key="platform.platform_name"
            class="creator-detail__platform-item"
          >
            <div class="creator-detail__platform-info">
              <div class="creator-detail__platform-header">
                <img
                  v-if="platform.platform_icon"
                  :src="platform.platform_icon"
                  :alt="platform.platform_name"
                  class="creator-detail__platform-icon"
                />
                <span class="creator-detail__platform-name">{{ platform.platform_name }}</span>
              </div>
            </div>
            <n-button
              v-if="platform.platform_url"
              size="small"
              type="primary"
              ghost
              tag="a"
              :href="platform.platform_url"
              target="_blank"
            >
              <template #icon>
                <n-icon><LinkOutline /></n-icon>
              </template>
              访问
            </n-button>
          </div>
        </div>
      </div>

      <!-- 直播平台 -->
      <div v-if="creator.live_url" class="creator-detail__live">
        <h3>直播链接</h3>
        <div class="creator-detail__live-info">
          <div class="creator-detail__live-platform">
            <n-icon><RadioOutline /></n-icon>
            <span>{{ creator.platform || '未知平台' }}</span>
          </div>
          <n-button
            size="small"
            type="primary"
            tag="a"
            :href="creator.live_url"
            target="_blank"
          >
            <template #icon>
              <n-icon><LinkOutline /></n-icon>
            </template>
            进入直播间
          </n-button>
        </div>
      </div>

      <!-- 主页链接 -->
      <div v-if="creator.main_url" class="creator-detail__contact">
        <h3>主页链接</h3>
        <n-button
          size="small"
          type="primary"
          tag="a"
          :href="creator.main_url"
          target="_blank"
        >
          <template #icon>
            <n-icon><LinkOutline /></n-icon>
          </template>
          访问主页
        </n-button>
      </div>

      <!-- 时间信息 -->
      <div class="creator-detail__time">
        <div class="creator-detail__time-item">
          <span class="creator-detail__time-label">创建时间：</span>
          <span>{{ formatDate(creator.create_time) }}</span>
        </div>
        <div class="creator-detail__time-item">
          <span class="creator-detail__time-label">更新时间：</span>
          <span>{{ formatDate(creator.update_time) }}</span>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="creator-detail__error">
      <n-empty description="创作者信息加载失败">
        <template #icon>
          <n-icon :size="48" :depth="3">
            <AlertCircleOutline />
          </n-icon>
        </template>
        <template #extra>
          <n-button size="small" @click="fetchCreatorDetail">
            重新加载
          </n-button>
        </template>
      </n-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useMessage } from 'naive-ui'
import {
  StarOutline,
  FolderOutline,
  PeopleOutline,
  VideocamOutline,
  RadioOutline,
  LinkOutline,
  AlertCircleOutline
} from '@vicons/ionicons5'
import { getCreatorDetail } from '@/api/creators'
import type { CreatorDetail as CreatorDetailType } from '@/types/creators'
import { CREATOR_TYPES, CREATOR_STATUS } from '@/api/creators'

interface Props {
  creatorId: number
}

interface Emits {
  (e: 'close'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const message = useMessage()

// 状态
const loading = ref(false)
const creator = ref<CreatorDetailType | null>(null)

// 获取创作者详情
const fetchCreatorDetail = async () => {
  try {
    loading.value = true
    console.log('正在获取创作者详情，ID:', props.creatorId)
    const response = await getCreatorDetail(props.creatorId)
    console.log('创作者详情响应:', response)

    if (response.code === 1) {
      creator.value = response.data as unknown as CreatorDetailType
      console.log('创作者详情设置成功:', creator.value)
    } else {
      console.error('创作者详情API返回错误:', response)
      message.error(response.msg || '获取创作者详情失败')
    }
  } catch (error: any) {
    console.error('获取创作者详情失败:', error)
    message.error('获取创作者详情失败: ' + (error?.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

// 获取创作者类型文本
const getCreatorTypeText = (type: number) => {
  return CREATOR_TYPES[type as keyof typeof CREATOR_TYPES]?.label || '未知类型'
}

// 获取创作者类型标签类型
const getCreatorTypeTagType = (type: number) => {
  switch (type) {
    case 1: return 'error'
    case 2: return 'info'
    case 3: return 'success'
    default: return 'default'
  }
}

// 获取状态文本
const getStatusText = (status: number) => {
  return CREATOR_STATUS[status as keyof typeof CREATOR_STATUS]?.label || '未知状态'
}

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  switch (status) {
    case 1: return 'success'
    case 2: return 'warning'
    case 3: return 'error'
    default: return 'default'
  }
}

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num.toString()
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

// 处理头像加载成功
const handleAvatarLoad = () => {
  console.log('创作者详情头像加载成功:', creator.value?.avatar)
}

// 处理头像加载错误
const handleAvatarError = () => {
  console.error('创作者详情头像加载失败:', creator.value?.avatar)
  console.log('将显示默认头像，创作者详情信息:', creator.value)
}

// 监听创作者ID变化
watch(() => props.creatorId, () => {
  if (props.creatorId) {
    fetchCreatorDetail()
  }
}, { immediate: true })

// 生命周期
onMounted(() => {
  if (props.creatorId) {
    fetchCreatorDetail()
  }
})
</script>

<style scoped>
.creator-detail {
  padding: 20px;
}

.creator-detail__loading,
.creator-detail__error {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.creator-detail__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.creator-detail__header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.creator-detail__avatar {
  position: relative;
  flex-shrink: 0;
}

.creator-detail__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.creator-detail__avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--n-color-primary);
  color: white;
  font-weight: 600;
  font-size: 24px;
  border-radius: 50%;
}

.creator-detail__recommend-tag {
  position: absolute;
  top: -8px;
  right: -8px;
}

.creator-detail__info {
  flex: 1;
}

.creator-detail__name {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--n-text-color);
}

.creator-detail__meta {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.creator-detail__category {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--n-text-color-2);
}

.creator-detail__description h3,
.creator-detail__stats h3,
.creator-detail__tags h3,
.creator-detail__platforms h3,
.creator-detail__live h3,
.creator-detail__contact h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--n-text-color);
}

.creator-detail__description p {
  line-height: 1.6;
  color: var(--n-text-color-2);
  margin: 0;
}

.creator-detail__stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.creator-detail__stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--n-card-color);
  border: 1px solid var(--n-border-color);
  border-radius: 8px;
}

.creator-detail__stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.creator-detail__stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--n-text-color);
}

.creator-detail__stat-label {
  font-size: 12px;
  color: var(--n-text-color-2);
}

.creator-detail__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creator-detail__platforms-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creator-detail__platform-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--n-card-color);
  border: 1px solid var(--n-border-color);
  border-radius: 8px;
}

.creator-detail__platform-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.creator-detail__platform-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-detail__platform-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}

.creator-detail__platform-name {
  font-weight: 500;
  color: var(--n-text-color);
}

.creator-detail__live-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--n-card-color);
  border: 1px solid var(--n-border-color);
  border-radius: 8px;
}

.creator-detail__live-platform {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--n-text-color);
}

.creator-detail__contact p {
  line-height: 1.6;
  color: var(--n-text-color-2);
  margin: 0;
}

.creator-detail__time {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--n-card-color);
  border: 1px solid var(--n-border-color);
  border-radius: 8px;
}

.creator-detail__time-item {
  display: flex;
  gap: 8px;
  font-size: 14px;
}

.creator-detail__time-label {
  color: var(--n-text-color-2);
  min-width: 80px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .creator-detail {
    padding: 16px;
  }

  .creator-detail__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }

  .creator-detail__stats-grid {
    grid-template-columns: 1fr;
  }

  .creator-detail__platform-item,
  .creator-detail__live-info {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}
</style>
